<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    /* 1.标准盒子 内容盒子 w3c盒子
      盒子宽:内容区宽+左右内边距+左右边框
        100px + 27px +24px + 10px = 161px
      盒子高:内容区高+上下内边距+上下边框
        100px + 13px + 36px + 10px = 159px
      盒子所占页面宽:盒子宽 + 左右外边距 
        161px + 33px + 14px = 208px
      盒子所占页面高:盒子高 + 上下外边距
        159px + 15px + 25px = 199px 
    */
    .contentBox{
      width: 100px;
      height: 100px;
      /*  border:width style color*/
      border: 5px solid pink;
      padding: 13px 27px 36px 24px;
      margin: 15px 33px 25px 14px;



      /* border-style: ; */
      /* 内边距 内容区到边框距离 padding */
      /* 上下左右内边距都为10px */
      /* padding: 10px; */
      /* 上下为10px 左右20px */
      /* padding: 10px 20px; */
      /* 上内边距为10px 左右为20px 下内边距为30px */
      /* padding: 10px 20px 30px; */
      /* 上右下左 */
      /* padding: 10px 20px 30px 40px; */




      /* border-top: 10px dotted orange; */
      /* 设置盒子背景图片 设置盒子渐变色 */
      /* background-image: url(../Day01/音视频/ad7.jpeg); */
      /* 设置背景图片大小尺寸 */
      /* background-size:100% 100%; */
      /* 线性渐变 */
      background-image:linear-gradient(to right bottom,red,blue,cyan);
    }
    /* 2.边框盒子 怪异盒子 IE盒子
        盒子宽:width=内容区宽+左右内边距+左右边框  
          100px = 26px(内容区宽)+ 24px + 34px + 16px 
        盒子高:height=内容区高+上下内边距+上下边框
          100px = 55px + 12px + 17px + 16px
        盒子所占页面空间宽:盒子宽 + 左右外边距 
          100px + 37px + 24px = 161px
        盒子所占页面空间高:盒子高 + 上下外边距 
          100px + 15px + 12px = 127px
    */
    .borderBox{
      /* 开启边框盒子 默认是内容盒子content-box */
      box-sizing: border-box;
      width: 100px;
      height: 100px;
      border: 8px solid blue;
      padding: 12px 24px 17px 34px;
      margin: 15px 37px 12px 24px;
      /* 径向渐变 */
      background-image: radial-gradient(pink,orange,blue);
    }
  </style>
</head>
<body>
  <div class="contentBox">标准盒子</div>
  <div class="borderBox">边框盒子</div>
  <!-- 
    盒模型:
      盒子种类：{
        1.标准盒子 内容盒子 w3c盒子
        2.边框盒子 IE盒子 怪异盒子
      }
      盒子区别:{
        标准盒子宽高是设置给内容区宽高
        边框盒子宽高是设置给盒子本身宽高
      }
   -->
</body>
</html>